<template>
	<view class="container" :style="{'height':windowHeight+'px','background':'#0856DA url(' + staticHost + '/seller_bg.png?v='+version+') center top no-repeat'}">
		<uni-nav-bar title="商家认证" :statusBar="true" backgroundColor="none"
			:border="false" color="#FFFFFF" left-icon="left" @clickLeft="back()"></uni-nav-bar>
		<view class="content" :style="{'background-image':'url(' + staticHost + '/seller_input_bg.png?v='+version+')'}">
		<uni-forms ref="baseForm" :model="formData" :rules="rules">
			<uni-forms-item name="companyName" label="公司名称">
				<uni-easyinput v-model="formData.companyName" placeholder="请输入" size="mini" />
			</uni-forms-item>
			<uni-forms-item name="companyCode" label="统一社会信用代码">
				<uni-easyinput v-model="formData.companyCode" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item name="contactName" label="姓名">
				<uni-easyinput v-model="formData.contactName" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item name="contactIdCard" label="身份证号">
				<uni-easyinput v-model="formData.contactIdCard" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item name="contactMobile" label="电话">
				<uni-easyinput v-model="formData.contactMobile" placeholder="请输入" />
			</uni-forms-item>
			<view  class="c-image">
				<uni-forms-item name="companyImg" label="营业执照正面/身份证正反面" required>
					<uni-file-picker v-model="formData.companyImg" fileMediatype="image" mode="grid" @select="select"
						@delete="deleted" auto-upload="false" limit="3">
					</uni-file-picker>
				</uni-forms-item>
			</view>
		</uni-forms>
		<view style="text-align: center; margin:20rpx 0rpx; ">
			<checkbox-group @change="checkboxChange">
			<label>
				<checkbox value="cb" :checked="false" style="transform:scale(0.7)" />
				阅读并同意<text @click.stop="toArticle(41)" style="text-decoration: underline;">《用户服务协议》</text>和<text @click.stop="toArticle(43)" style="text-decoration: underline;">《隐私政策》</text>
			</label>
			</checkbox-group>
		</view>
		<button class="send-btn" type="warn" @click="submitForm()">提交</button>
	</view>
	</view>
</template>

<script>
	import {
		accountApis
	} from '@/pages/apis/user/account.js'

	import {
		recursiveToBase64,
		navigateBackRefresh
	} from '@/pages/utils/common.js'

	import {
		CONFIG
	} from '@/pages/config.js'
	
	import { Regexp } from '@/pages/utils/Regexp.js'

	export default {
		data() {
			return {
				Config: this.$Config,
				Common: this.$Common,
				Auth: this.$Auth,
				ShareUtil: this.$ShareUtil,
				State: this.$store.state,
				Dict: this.$Dict,
			
				formData: {
					id: "",
					companyName: "",
					companyCode: "",
					companyAddress: "",
					companyTel: "",
					companyImg: [],
					companyBankName: "",
					companyBankNo: "",
					companyLegalPerson: "",
					companyLegalPersonIdCard: "",
					companyLegalPersonMobile: ""
				},
				rules: {
					companyName: {
						rules: [{
							required: true,
							errorMessage: '公司名称不能为空'
						}]
					},
					companyCode: {
						rules: [{
							required: true,
							errorMessage: '统一社会信用代码不能为空'
						}]
					},
					contactName: {
						rules: [{
							required: true,
							errorMessage: '请填写姓名'
						}]
					},
					contactIdCard: {
						rules: [{
							required: true,
							errorMessage: '请填写身份证号'
						},{
							pattern:Regexp.ID_CARD,
							errorMessage:'身份证号格式不正确'
						}]
					},
					contactMobile: {
						rules: [{
							required: true,
							errorMessage: '请填写联系电话'
						},{
							pattern:Regexp.MOBILE,
							errorMessage:'手机号格式不正确'
						}]
					},
					companyImg: {
						rules: [{
							required: true,
							errorMessage: '请上传营业执照'
						}]
					}
				},
				staticHost:CONFIG.STATIC_HOST,
				version:CONFIG.VERSION,
				windowHeight:0,
				selectValue:[]
			}
		},
		onLoad() {
			let that = this
			this.initPage()
			
			uni.getSystemInfo({
				success: function (res) {
					that.windowHeight = res.screenHeight
				}
			});
		},
		methods: {
			initPage() {
				accountApis.getSellerInfo({}).then((response) => {
					if (response) {
						response.companyImg = JSON.parse(response.companyImg)
						response.companyImg.forEach(item => {
							item.name = item.url
						})

						this.formData = response
					}
				})
			},
			// 获取上传状态
			select(e) {
				let imgs = []
				e.tempFilePaths.forEach(function(item) {
					imgs.push({
						"url": item
					})
				})
				this.formData.companyImg = this.formData.companyImg.concat(imgs)
			},
			submitForm() {
				let that = this
				
				this.$refs['baseForm'].validate().then(res => {
					if(this.formData.companyImg.length != 3){
						uni.showModal({
							title: '提示',
							content: '必须上传营业执照正面和身份证正反面，共3张',
							showCancel:false,
							success: function (res) {
							}
						});
						
						return false
					}
					if(this.selectValue.length==0){
						uni.showModal({
							title: '提示',
							content: '请阅读并同意《用户服务协议》和《隐私政策》',
							showCancel:false,
							success: function (res) {
							}
						});
						
						return false
					}
					
					uni.showModal({
						title: '提示',
						content: '确定提交审核吗？',
						success: function(res) {
							if (res.confirm) {
								let data = Object.assign({}, that.formData)

								recursiveToBase64(data.companyImg, 0, function(imgs) {
									data.companyImg = imgs

									accountApis.sellerApply(data).then((response) => {
										uni.showModal({
											title: '提交成功',
											content: '平台审核中，审核时间1-3个工作日，请耐心等待审核结果...',
											showCancel: false,
											success: function(res) {
												uni.switchTab({
													url: '/pages/ucenter/index'
												});
											}
										})
									})
								})
							}
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			back(){
				uni.navigateBack({delta: 1})
			},
			checkboxChange(e){
				this.selectValue = e.detail.value
			},
			toArticle(id) {
				uni.navigateTo({
					url: '/pages/index/article?id=' + id
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.topTitle{ width:100%; height:40px; line-height:40px; position: fixed;top:25px; color:#FFF;
				text-align: center; font-size:16px;}
	.topTitle .uni-icons{ position: absolute;left:30rpx;top:0px;}
	.content {
		width: 680rpx;
		height: 1074rpx;
		background-position: top center;
		background-repeat: no-repeat;
		background-size: 100%;
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		margin-left: -338rpx;
		padding:130rpx 30rpx 30rpx 30rpx;

	}

	::v-deep .uni-forms-item__label {
		width: 75px !important;
		// align-items:flex-start !important;
	}
	::v-deep .uni-forms-item__label text{
		color:#FFF;
	}
	
	::v-deep .uni-forms-item .is-required{ display: none !important;}
	
	::v-deep .uni-forms-item__error{}
	::v-deep .uni-forms-item.is-direction-left{ margin-bottom: 44rpx; }
	::v-deep .uni-easyinput__content-input{ height: 60rpx; line-height:60rpx;}
	::v-deep .uni-forms-item__label{ height:60rpx; }
	::v-deep .is-input-border{ border:none;}
	::v-deep .c-image .uni-forms-item__label{align-items: flex-start;}
</style>
